<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-menu
          class="el-menu-vertical-demo"
          style="height: 640px;"
          default-active=""
          router
        >
          <el-image :src="src" style="width: 150px;height: 100px;margin-top: 13px;border-radius: 10%">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <div style="margin-top: 15px;font-weight: bolder">
            {{ this.course.courseName }}
          </div>
          <el-divider></el-divider>
          <el-menu-item index="/student/course/work">
            <i class="el-icon-files"></i>
            <span slot="title">作 业</span>
          </el-menu-item>
          <el-menu-item index="/student/course/notice">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">通 知</span>
          </el-menu-item>
          <el-menu-item index="/student/course/resource">
            <i class="el-icon-film"></i>
            <span slot="title">资 料</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="19" :offset="1" style="margin-top: 20px;">
        <el-card style="min-height: 580px">
          <router-view></router-view>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'studentCourse',
  data () {
    return {
      src: require('../../../assets/fengmian.jpg'),
      course: {
        courseId: 0,
        courseName: '',
        coursePeriod: 0,
        coursePoint: 0,
        courseContent: '',
      }
    }
  },
  methods: {
    init () {
      this.$http({
        url: '/api/course/details/' + this.$store.state.course.courseId,
        method: 'get'
      }).then(res => {
        if (res.data.code === 4040) {
          this.$store.state.course.courseName = res.data.result.courseName
          this.$store.state.course.coursePeriod = res.data.result.coursePeriod
          this.$store.state.course.coursePoint = res.data.result.coursePoint
          this.$store.state.course.courseContent = res.data.result.courseContent
          this.$store.state.course.courseStatus = res.data.result.courseStatus
        } else {
          this.$message({
            type: 'error',
            message: '获取信息失败!',
            duration: 2000,
          })
        }
      })
      this.course = this.$store.state.course
    }
  },
  created () {
    this.$store.state.course.courseId = this.$route.query.courseId

    this.init()
  },
}
</script>

<style scoped>

</style>
